<template>
    <page-header-wrapper>
        <a-card :bordered="false">
            <!-- 条件搜索 -->
            <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="48">
                        <a-col :md="5" :sm="24">
                            <a-form-item label="项目名称" prop="projectName">
                                <a-input v-model="queryParam.projectName" placeholder="请输入项目名称" allow-clear />
                            </a-form-item>
                        </a-col>
                        <a-col :md="5" :sm="24">
                            <a-form-item label="需求人" prop="needUserName">
                                <a-input v-model="queryParam.needUserName" placeholder="请输入需求人" allow-clear />
                            </a-form-item>
                        </a-col>
                        <a-col :md="5" :sm="24">
                            <a-form-item label="发货设备类型" prop="deviceType">
                                <a-select v-model="queryParam.deviceType" placeholder="请选择发货设备类型"
                                    :filterOption="filterOption" show-search>
                                    <a-select-option v-for="(d, index) in dict.type['eq_type']" :key="index"
                                        :value="d.value">{{ d.label
                                        }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <template v-if="advanced">
                            <a-col :md="5" :sm="24">
                                <a-form-item label="需求车型" prop="needVehicle">
                                    <a-input v-model="queryParam.needVehicle" placeholder="请输入需求车型" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :md="5" :sm="24">
                                <a-form-item label="始发地" prop="startAddr">
                                    <a-input v-model="queryParam.startAddr" placeholder="请输入始发地" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :md="5" :sm="24">
                                <a-form-item label="目的地" prop="endAddr">
                                    <a-input v-model="queryParam.endAddr" placeholder="请输入目的地" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :md="5" :sm="24">
                                <a-form-item label="发货设备" prop="sendDevice">
                                    <a-input v-model="queryParam.sendDevice" placeholder="请输入发货设备" allow-clear />
                                </a-form-item>
                            </a-col>
                            <a-col :md="5" :sm="24">
                                <a-form-item label="接收时间" prop="acceptTime">
                                    <a-range-picker style="width: 100%" format="YYYY-MM-DD HH:mm:ss" allow-clear
                                        @change="handleTime" />
                                </a-form-item>
                            </a-col>
                            <a-col :md="5" :sm="24">
                                <a-form-item label="耗材类型" prop="materialType">
                                    <!-- <a-input v-model="queryParam.acceptBy" placeholder="请输入耗材类型" allow-clear/> -->
                                    <a-select v-model="queryParam.materialType" placeholder="请选择发货设备类型"
                                        :filterOption="filterOption" show-search>
                                        <a-select-option value="0">
                                            需求人
                                        </a-select-option>
                                        <a-select-option value="1">
                                            装车人
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </template>
                        <a-col :md="!advanced && 8 || 24" :sm="24">
                            <span class="table-page-search-submitButtons"
                                :style="advanced && { float: 'right', overflow: 'hidden' } || {}">
                                <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
                                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon
                                        type="redo" />重置</a-button>
                                <a @click="toggleAdvanced" style="margin-left: 8px">
                                    {{ advanced ? '收起' : '展开' }}
                                    <a-icon :type="advanced ? 'up' : 'down'" />
                                </a>
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <!-- 操作 -->
            <div class="table-operations">
                <a-button type="primary" @click="handleExport" v-hasPermi="['system:info:export']">
                    <a-icon type="download" />导出
                </a-button>
                <table-setting :style="{ float: 'right' }" :table-size.sync="tableSize" v-model="columns"
                    :refresh-loading="loading" @refresh="getList" />
            </div>
            <!-- 数据展示 -->
            <a-table :loading="loading" :size="tableSize" rowKey="id" :columns="columns" :data-source="list"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false"
                :bordered="tableBordered">
            </a-table>
            <!-- 分页 -->
            <a-pagination class="ant-table-pagination" show-size-changer show-quick-jumper :current="queryParam.pageNum"
                :total="total" :page-size="queryParam.pageSize" :showTotal="total => `共 ${total} 条`"
                @showSizeChange="onShowSizeChange" @change="changeSize" />
        </a-card>
    </page-header-wrapper>
</template>

<script>
import { listInfo } from '@/api/reports/index'
import { tableMixin } from '@/store/table-mixin'
import { getLogistics } from '@/api/system/user'
import { getDicts } from '@/api/system/dict/data'
export default {
    name: 'Info',
    components: {
    },
    dicts: ['order_status', 'eq_type', 'point_type'],
    mixins: [tableMixin],
    data() {
        return {
            list: [],
            selectedRowKeys: [],
            selectedRows: [],
            // 高级搜索 展开/关闭
            advanced: false,
            // 非多个禁用
            multiple: true,
            ids: [],
            loading: false,
            total: 0,
            // 查询参数
            queryParam: {
                needUserName: undefined,
                projectName: undefined,
                needVehicle: undefined,
                deviceType: undefined,
                startAddr: undefined,
                endAddr: undefined,
                sendDevice: undefined,
                requestStartDate: undefined,
                requestEndDate: undefined,
                materialType: '0',
                pageNum: 1,
                pageSize: 10
            },
            deptOptions: [],
            carStatusList: [],
            replaceFields: { children: 'children', title: 'label', key: 'id', value: 'id' },
            columns: [
                {
                    title: '项目名称',
                    dataIndex: 'projectName',
                    align: 'center'
                },
                {
                    title: '需求人',
                    dataIndex: 'needUserName',
                    align: 'center'
                },
                {
                    title: '发货设备',
                    dataIndex: 'deviceName',
                    align: 'center'
                },
                {
                    title: '需求车型',
                    dataIndex: 'needVehicle',
                    align: 'center'
                },
                {
                    title: '要求发货日期',
                    dataIndex: 'deliverDate',
                    align: 'center'
                },
                {
                    title: '始发地',
                    dataIndex: 'beginAddr',
                    align: 'center'
                },
                {
                    title: '目的地',
                    dataIndex: 'endAddr',
                    align: 'center'
                },
                {
                    title: '发货耗材设备',
                    dataIndex: 'sendDevice',
                    align: 'center'
                },
                {
                    title: '尺寸',
                    dataIndex: 'size',
                    align: 'center'
                },
                {
                    title: '数量',
                    dataIndex: 'count',
                    align: 'center'
                },
                {
                    title: '单位',
                    dataIndex: 'unit',
                    align: 'center'
                },
            ]
        }
    },
    filters: {
    },
    created() {
        this.getOptionDic()
        this.getList()
    },
    computed: {
    },
    watch: {
    },
    methods: {
        // 筛选功能
        filterOption(inputValue, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
        },
        handleTime(_a, b) {
            this.queryParam.requestStartDate = b[0]
            this.queryParam.requestEndDate = b[1]
        },
        /** 查询用车订单列表 */
        getList() {
            this.loading = true
            listInfo(this.queryParam).then(response => {
                this.list = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        getOptionDic() {
            //获取物流公司信息
            getLogistics().then(response => {
                this.deptOptions = response.data.children
            })
            //获取订单状态
            getDicts('order_status').then(res => {
                this.carStatusList = res.data
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParam.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParam = {
                needUserName: undefined,
                projectName: undefined,
                needVehicle: undefined,
                deviceType: undefined,
                startAddr: undefined,
                endAddr: undefined,
                sendDevice: undefined,
                requestStartDate: undefined,
                requestEndDate: undefined,
                materialType: '0',
                pageNum: 1,
                pageSize: 10
            }
            this.handleQuery()
        },
        onShowSizeChange(current, pageSize) {
            this.queryParam.pageSize = pageSize
            this.getList()
        },
        changeSize(current, pageSize) {
            this.queryParam.pageNum = current
            this.queryParam.pageSize = pageSize
            this.getList()
        },
        onSelectChange(selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectedRows = selectedRows
            this.ids = this.selectedRows.map(item => item.id)
            this.multiple = !selectedRowKeys.length
        },
        toggleAdvanced() {
            this.advanced = !this.advanced
        },
        /** 导出按钮操作 */
        handleExport() {
            var that = this
            this.$confirm({
                title: '是否确认导出?',
                content: '此操作将导出当前条件下所有数据而非选中数据',
                onOk() {
                    that.download('/static/report/consumables/detail/export', {
                        ...that.queryParam
                    }, `info_${new Date().getTime()}.xlsx`)
                },
                onCancel() { }
            })
        }
    }
}
</script>